<template>
  <!-- 设备库存页面 -->
  <div class="stockDetail">
    <!--按钮区域 begin-->
    <div class="btns" style="padding: 1em; margin-bottom: 1em; background: #fff">
      <el-select v-model="searchForm.proId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
        <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
      </el-select>
      <el-select v-model="searchForm.contractId" placeholder="选择合同" filterable clearable>
        <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
      </el-select>
      <el-input v-model="searchForm.item" placeholder="设备名" clearable></el-input>
      <el-date-picker
        style="margin-left: 8px"
        v-model="searchFormTemp.time"
        unlink-panels
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button @click="toSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px" >查询</el-button>
      <el-button class="exportButton" type="primary" icon="el-icon-download" @click="handleDownload" size="small">导出</el-button>
    </div>
    <!--按钮区域 end-->
    <div class="btns">
    </div>
    <!--表格卡片区域 begin-->
    <el-card shadow="never">
      <a-table
        size="small"
        :rowKey="record => record.id"
        :loading="stockDetailTable.loading"
        :data-source="stockDetailTable.data"
        :scroll="stockDetailTable.data.length > 0 ?{ x: 1600}:{}"
        >
        <a-table-column :width="100" align="center" ellipsis="true" fixed="left" key="stockNumber" title="库存" data-index="stockNumber">
          <template slot-scope="text, record">
            <el-tag type="success">{{text}}</el-tag>
          </template>
        </a-table-column>
        <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="item" title="设备名" data-index="item" />
        <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="supplier" title="供应商" data-index="supplier" />
        <a-table-column :width="300" align="center" ellipsis="true" key="brand" title="品牌" data-index="brand" />
        <a-table-column :width="150" align="center" ellipsis="true" key="model" title="型号" data-index="model" />
        <a-table-column align="center" key="params" ellipsis="true" title="技术参数" data-index="params" />
        <a-table-column :width="100" align="center" key="price" title="单价" data-index="price" />
        <a-table-column :width="100" align="center" key="totalPrice" title="总价" >
          <template slot-scope="text, record">
            {{record.price&&record.number?record.price * record.number:''}}
          </template>
        </a-table-column>
        <a-table-column :width="100" align="center" ellipsis="true" key="delivery" title="货期" data-index="delivery" />
        <a-table-column :width="100" align="center" ellipsis="true" key="warranty" title="质保期" data-index="warranty" />
        <a-table-column :width="100" align="center" ellipsis="true" key="remark" title="备注" data-index="remark" />
      </a-table>
    </el-card>
    <!--表格卡片区域 end-->
  </div>
</template>
<script>
  import "@/styles/auto-style.css";
  import { getAction, postActionByJson, postActionByQueryString } from "@/api/manage";
  import elDragDialog from "@/directive/el-drag-dialog";
  import request from "@/utils/request";

  export default {
    directives: { elDragDialog },
    data() {
      return {

        selectedRowKeysItems: [],
        selectedRowKeys: [],
        url: {
          findDeliveryByParams: '/stock/manage/findDeliveryByParams'
        },
        // 按钮区域表单
        searchForm: {},
        // 存放时间表单
        searchFormTemp: {},
        options: {
          projects: [],
          contracts: [],
        },
        stockDetailTable: {
          data: [],
          loading: false,
        }
      }
    },
    created() {
      this.loadProjects()
    },
    methods: {
      itemsSelectionChange(record){
        const itemsId = []
        record.map(item => {
          itemsId.push(item)
        })
        this.selectedRowKeysItems = itemsId
      },
      // 按钮区域搜索事件
      toSearch() {
        this.stockDetailTable.loading = true
        if(this.searchFormTemp.time != null) {
          this.searchForm.startTime = this.searchFormTemp.time[0]
          this.searchForm.endTime = this.searchFormTemp.time[1]
        }
        getAction(this.url.findDeliveryByParams, this.searchForm)
          .then(resp => {
            this.stockDetailTable.data = resp.data
            this.stockDetailTable.loading = false
          })
          .catch(()=>{
            this.stockDetailTable.loading = false
          })
      },
      // 查询项目列表
      loadProjects() {
        getAction("/purchase/project/findAllLike")
          .then((resp) => {
            this.options.projects = resp.data
          })
      },
      // 查询合同列表
      loadContracts(proId) {
        getAction('/purchase/contract/findByProjectId', { projectId: proId })
          .then(resp => {
            this.options.contracts = resp.data
          })
      },
      // 项目下拉框 Change 事件
      proSelectChange(id) {
        this.$delete(this.searchForm,'contractId')
        this.loadContracts(id)
      },
      handleDownload() {
        this.downloadLoading = true
        let startTime1 = ''
        let endTime1 = ''
        if (this.searchFormTemp.time != null){
          startTime1 = this.searchFormTemp.time[0],
          endTime1 =  this.searchFormTemp.time[1]
        }
        request.request( {
          url: this.url.findDeliveryByParams,
          methods: 'get',
          params: {
            pageFlag: 0,
            startTime: startTime1,
            endTime: endTime1
          }
        }).then(resp => {
          let data1 = resp.data
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = [
              '库存', '设备名', '供应商', '品牌', '型号', '技术参数', '单价', '总价', '货期', '保质期', '备注'
            ]
            const filterVal = [
              'stockNumber', 'item', 'supplier', 'brand', 'model', 'params', 'price', 'totalPrice', 'delivery', 'warranty', 'remark'
            ]
            const data = this.formatJson(filterVal, data1)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '库存明细报表'
            })
            this.downloadLoading = false
          })
        }).catch(()=>{
          this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }
    }
  }
</script>
<style lang="scss" scoped>
  .exportButton {
    position: absolute;
    right: 20px;
    margin: 4px 0px 0px 6px;
  }
</style>

